<template>
  <div class="html-wrapper">
    <h1 style="position: sticky;top: 0;background-color: #ffffff;">当前网页的HTML结构</h1>
    <pre class="res">{{ htmlStr }}</pre>
    <h1 style="position: sticky;top: 0;background-color: #ffffff;">ESM JavaScript 代码</h1>
    <sub>import语法</sub>
    <pre class="js-rd">{{ jsStr }}</pre>
    <h1 style="position: sticky;top: 0;background-color: #ffffff;">
      borswer JavaScript 代码
    </h1>
    <sub>只能在控制台查看DOM结构</sub>
    <pre class="js-rd">{{ jsBorswerStr }}</pre>
  </div>
  <div class="two" id="two"></div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import DomFormat from './htmlParse';

const htmlStr = ref("");
const jsStr = ref("");
const jsBorswerStr = ref("");

onMounted(() => {
  htmlStr.value = new DomFormat({
    isShowProperty: false,
  }).getHTML();
  readJavaScriptCode();
  readBorswerJavaScriptCode();
})


const readJavaScriptCode = () => {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', './htmlParse.js', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var jsCode = xhr.responseText;
      // 在这里可以对读取到的 JavaScript 代码进行处理
      jsStr.value = jsCode;
    }
  };
  xhr.send();
}

const readBorswerJavaScriptCode = () => {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', './htmlParseBorswer.js', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var jsCode = xhr.responseText;
      // 在这里可以对读取到的 JavaScript 代码进行处理
      jsBorswerStr.value = jsCode;
    }
  };
  xhr.send();
}
</script>
  
<style scoped>
.html-wrapper {
  padding: 0 20px;
  text-align: left;
}

.js-rd {
  background-color: #000000;
  color: #ffffff;
  padding: 30px;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  border-radius: 10px;
  overflow-x: auto;
}

.res {
  background-color: #000000;
  color: #ffffff;
  padding: 30px;
  font-size: 15px;
  border-radius: 10px;
  overflow-x: auto;
  font-family: "Courier New", Courier, monospace;
}
</style>